<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue'
import CardIntro from './components/CardIntro.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 页面引用
const systemIntro = ref(null)
const denoisingSection = ref(null)
const alignmentSection = ref(null)
const yoloSection = ref(null)

// 模型弹窗引用
const denoisingModelPopup = ref(null)
const alignmentModelPopup = ref(null)
const yoloModelPopup = ref(null)

// 是否显示弹窗
const isDenoisingModelVisible = ref(false)
const isAlignmentModelVisible = ref(false)
const isYoloModelVisible = ref(false)

// 路由
const router = useRouter()

// 登录/注册
const toLogin = () => {
    router.push('/login')
}

// 打开Gitee仓库
const toGitee = () => {
    window.open('https://gitee.com/mindwell/bank-management')
}

// 模型展示弹窗
const showDenoisingModel = () => {
    isDenoisingModelVisible.value = true
    document.body.style.overflow = 'hidden'
}

const showAlignmentModel = () => {
    isAlignmentModelVisible.value = true
    document.body.style.overflow = 'hidden'
}

const showYoloModel = () => {
    isYoloModelVisible.value = true
    document.body.style.overflow = 'hidden'
}

// 关闭弹窗
const closeModelPopup = () => {
    isDenoisingModelVisible.value = false
    isAlignmentModelVisible.value = false
    isYoloModelVisible.value = false
    document.body.style.overflow = 'auto'
}

// 平滑滚动到指定部分
const scrollToSection = (section) => {
    section.value.scrollIntoView({ behavior: 'smooth' })
}

// 滚动监听 - 用于侧边导航高亮
const handleScroll = () => {
    const scrollPosition = window.scrollY

    if (scrollPosition < 500) {
        setActiveNav('home')
    } else if (scrollPosition < 1500) {
        setActiveNav('denoising')
    } else if (scrollPosition < 2500) {
        setActiveNav('alignment')
    } else {
        setActiveNav('yolo')
    }
}

// 设置当前激活的导航项
const activeNav = ref('home')
const setActiveNav = (navId) => {
    activeNav.value = navId
}

// 监听滚动事件
onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="container">
    <!-- 侧边导航栏 -->
    <nav class="side-nav">
      <ul>
        <li :class="{ active: activeNav === 'home' }">
          <a href="#" @click.prevent="scrollToSection(systemIntro)">系统介绍</a>
        </li>
        <li :class="{ active: activeNav === 'denoising' }">
          <a href="#" @click.prevent="scrollToSection(denoisingSection)"
            >去烟模块</a
          >
        </li>
        <li :class="{ active: activeNav === 'alignment' }">
          <a href="#" @click.prevent="scrollToSection(alignmentSection)"
            >对齐融合</a
          >
        </li>
        <li :class="{ active: activeNav === 'yolo' }">
          <a href="#" @click.prevent="scrollToSection(yoloSection)">人体检测</a>
        </li>
      </ul>
    </nav>

    <!-- Header -->
    <header class="header">
      <h1 class="title">
        火域智眼——基于双模态感知的浓烟环境下人体目标实时检测系统
      </h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn"
      ></button-login>
    </header>

    <!-- 系统介绍 - 第一页 -->
    <main class="section" ref="systemIntro" id="home">
      <div class="system-intro">
        <div class="left">
          <h1>
            基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
          </h1>
          <p style="font-size: 2.3rem; line-height: 1.5">
            “火域智眼”系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
          </p>
          <div class="btn-wrapper">
            <button-login
              @click="toLogin"
              text="立即体验"
              extraClass="btn-use btn-intro"
            ></button-login>
            <button-login
              @click="toGitee"
              text="联系我们"
              extraClass="btn-contact btn-intro"
            ></button-login>
          </div>
        </div>
        <figure class="right">
          <img
            src="../../assets/svg/金融.svg"
            alt="消防机器人插图"
            class="img"
          />
        </figure>
      </div>
    </main>

    <!-- 去烟模块 - 第二页 -->
    <section class="section" ref="denoisingSection" id="denoising">
      <div class="section-header">
        <h2>去烟模块</h2>
      </div>
      <div class="denoising-content">
        <div class="image-comparison">
          <div class="image-before">
            <img src="../../assets/svg/模型算法.svg" alt="红外图片" />
            <p>红外图片（浓烟环境）</p>
          </div>
          <div class="image-after">
            <img src="../../assets/svg/模型算法.svg" alt="去烟后图片" />
            <p>去烟后图片（清晰环境）</p>
          </div>
        </div>

        <div class="model-showcase">
          <div class="model-preview" @mouseenter="showDenoisingModel">
            <img src="../../assets/svg/模型算法.svg" alt="去烟模型预览" />
            <span class="hover-text">点击查看详细模型</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 对齐和双模态融合模块 - 第三页 -->
    <section class="section" ref="alignmentSection" id="alignment">
      <div class="section-header">
        <h2>对齐和双模态融合模块</h2>
      </div>
      <div class="alignment-content">
        <div class="model-showcase">
          <div class="model-preview" @mouseenter="showAlignmentModel">
            <img src="../../assets/svg/模型算法.svg" alt="融合模型预览" />
            <span class="hover-text">点击查看详细模型</span>
          </div>
        </div>

        <div class="image-comparison-triple">
          <div class="image-thermal">
            <img src="../../assets/svg/模型算法.svg" alt="热成像图片" />
            <p>热成像图片</p>
          </div>
          <div class="image-infrared">
            <img src="../../assets/svg/模型算法.svg" alt="红外图片" />
            <p>红外图片</p>
          </div>
          <div class="image-fused">
            <img src="../../assets/svg/模型算法.svg" alt="融合后图片" />
            <p>双模态融合后图片</p>
          </div>
        </div>
      </div>
    </section>

    <!-- YOLOv12人体检测模块 - 第四页 -->
    <section class="section" ref="yoloSection" id="yolo">
      <div class="section-header">
        <h2>YOLOv12人体检测模块</h2>
      </div>
      <div class="yolo-content">
        <div class="detection-image">
          <img src="../../assets/svg/模型算法.svg" alt="人体检测图" />
          <p>基于YOLOv12的人体目标检测效果</p>
        </div>

        <div class="model-showcase">
          <div class="model-preview" @mouseenter="showYoloModel">
            <img src="../../assets/svg/模型算法.svg" alt="YOLO模型预览" />
            <span class="hover-text">点击查看详细模型</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 模型弹窗 -->
    <div
      class="model-popup"
      v-if="isDenoisingModelVisible"
      @click.self="closeModelPopup"
    >
      <div class="popup-content">
        <span class="close-btn" @click="closeModelPopup">×</span>
        <h3>去烟模型架构</h3>
        <img src="../../assets/svg/模型算法.svg" alt="去烟模型详情" />
        <p>
          基于深度学习的去烟算法，通过多层卷积神经网络有效去除浓烟干扰，提升图像清晰度。
        </p>
      </div>
    </div>

    <div
      class="model-popup"
      v-if="isAlignmentModelVisible"
      @click.self="closeModelPopup"
    >
      <div class="popup-content">
        <span class="close-btn" @click="closeModelPopup">×</span>
        <h3>双模态融合模型</h3>
        <img src="../../assets/svg/模型算法.svg" alt="融合模型详情" />
        <p>
          创新的双模态对齐算法，将热成像与红外图像精准融合，提供更全面的现场信息。
        </p>
      </div>
    </div>

    <div
      class="model-popup"
      v-if="isYoloModelVisible"
      @click.self="closeModelPopup"
    >
      <div class="popup-content">
        <span class="close-btn" @click="closeModelPopup">×</span>
        <h3>YOLOv12人体检测模型</h3>
        <img src="../../assets/svg/模型算法.svg" alt="YOLO模型详情" />
        <p>
          基于YOLOv12的改进算法，针对浓烟环境优化，实现高精度人体目标实时检测。
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/_variables';
@import '@/assets/scss/abstracts/_mixins';

:deep(.model-popup) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);

  .popup-content {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    .close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 1.5rem;
      cursor: pointer;
      color: #4834d4;
    }

    h3 {
      color: #4834d4;
      margin-bottom: 1.5rem;
    }

    img {
      width: 100%;
      max-height: 400px;
      object-fit: contain;
      margin-bottom: 1rem;
    }

    p {
      line-height: 1.6;
      color: #555;
    }
  }
}

:deep(.side-nav) {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px 0 0 20px;
  padding: 1rem 0;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transition: all 0.3s ease;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    li {
      padding: 0.5rem 1rem;
      border-radius: 20px 0 0 20px;
      cursor: pointer;
      transition: all 0.3s ease;

      &.active {
        background-color: #4834d4;
        color: white;
      }

      a {
        text-decoration: none;
        color: #4834d4;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &:hover {
          color: #4834d4;
        }
      }
    }
  }
}

.container {
  background-color: $color-grey-light-1;
  overflow-x: hidden;
}

.header {
  background-color: white;
  height: 8rem;
  width: 100%;
  box-shadow: 0 0.5rem 0.5rem rgba($color-grey-dark-1, 0.1);
  color: $color-dark;
  position: fixed;
  top: 0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;

  .title {
    line-height: 4rem;
    font-size: 3rem;
    color: #4834d4;
  }

  .login-btn {
    padding: 1.5rem;
    width: 15rem;
    font-size: 1.5rem;
    background-color: #4834d4;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: #3a2aaf;
      transform: translateY(-2px);
    }
  }
}

.section {
  min-height: 100vh;
  padding: 10rem 4rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
}

.section-header {
  margin-bottom: 3rem;
  position: relative;

  h2 {
    font-size: 2.5rem;
    color: #4834d4;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100px;
      height: 4px;
      background-color: #4834d4;
      border-radius: 2px;
    }
  }

  p {
    color: #666;
    max-width: 600px;
  }
}

.system-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  align-items: center;
  gap: 6rem;

  .left {
    justify-self: end;
    width: 90%;
    padding-right: 2rem;

    h1 {
      font-size: 3rem;
      line-height: 1.2;
      margin-bottom: 2rem;
      color: #333;

      span {
        color: #4834d4;
      }
    }

    p {
      font-size: 1.5rem;
      line-height: 1.6;
      color: #555;
      margin-bottom: 2rem;
    }

    .btn-wrapper {
      display: flex;
      align-items: flex-start;
      gap: 2rem;

      .btn-intro {
        padding: 1.5rem;
        width: 15rem;
        font-size: 1.5rem;
        padding-left: 3.3rem;
        position: relative;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.1);
          transform: translateX(-100%);
          transition: transform 0.3s ease;
        }

        &:hover::before {
          transform: translateX(0);
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
          );
          transform: translateX(-100%);
          transition: transform 0.3s ease;
        }

        &:hover::after {
          transform: translateX(0);
        }
      }

      .btn-use {
        background-color: #4834d4;
        color: white;

        &::before {
          background-color: rgba(255, 255, 255, 0.2);
        }
      }

      .btn-contact {
        background-color: white;
        color: #4834d4;
        border: 2px solid #4834d4;
      }
    }
  }

  .right {
    animation: fadeIn 1s ease-in-out;
    opacity: 0;

    .img {
      width: 90%;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

.denoising-content,
.alignment-content,
.yolo-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 2rem;
}

.image-comparison {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .image-before,
  .image-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    img {
      width: 100%;
      max-height: 400px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    img:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    p {
      color: #666;
      font-size: 1.1rem;
    }
  }
}

.image-comparison-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;

  .image-thermal,
  .image-infrared,
  .image-fused {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    img:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    p {
      color: #666;
      font-size: 1.1rem;
    }
  }
}

.detection-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  p {
    color: #666;
    font-size: 1.1rem;
    text-align: center;
  }
}

.model-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.model-preview {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 0.3s ease;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }

  &:hover img {
    transform: scale(1.05);
  }

  .hover-text {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  &:hover .hover-text {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .system-intro,
  .denoising-content,
  .alignment-content,
  .yolo-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .image-comparison-triple {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .header {
    height: 6rem;
    padding: 0 1rem;

    .title {
      font-size: 2rem;
    }
  }

  .section {
    padding: 8rem 1rem 2rem;
  }

  .image-comparison-triple {
    grid-template-columns: 1fr;
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>
